<template>
  <div class="login-page">
      <!-- 背景层 -->
      <div class="background"></div>

      <!-- 登录框 -->
      <div class="login-box">
        <el-tabs v-model="activeTab" type="border-card" class="login-tabs">
          <!-- 账号密码登录 -->
          <el-tab-pane label="账号密码登录" name="account">
            <el-form :model="accountForm" :rules="accountRules" ref="accountForm">
              <el-form-item prop="userName">
                <el-input v-model="accountForm.userName" placeholder="请输入账号" prefix-icon="el-icon-user"></el-input>
              </el-form-item>
              <el-form-item prop="userPass">
                <el-input v-model="accountForm.userPass" type="userPass" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
              </el-form-item>
              <el-button type="primary" class="submit-button" @click="submitAccountForm">登录</el-button>
            </el-form>
          </el-tab-pane>

          <!-- 手机号登录 -->
          <el-tab-pane label="手机号登录" name="phone">
            <el-form :model="phoneForm" :rules="phoneRules" ref="phoneForm">
              <el-form-item prop="phone">
                <el-input v-model="phoneForm.phone" placeholder="请输入手机号" prefix-icon="el-icon-phone"></el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-input v-model="phoneForm.code" placeholder="请输入验证码" prefix-icon="el-icon-message"></el-input>
                <el-button type="text" class="send-code-button" @click="sendCode" :disabled="sendingCode">
                  {{ sendingCode ? `${countdown}s 后重发` : '发送验证码' }}
                </el-button>
              </el-form-item>
              <el-button type="primary" class="submit-button" @click="submitPhoneForm">登录</el-button>
            </el-form>
          </el-tab-pane>

          <!-- <!-- QQ 登录 -->
          <!-- <el-tab-pane label="QQ 登录" name="qq">
            <div class="qq-login">
              <el-button class="qq-login-button" icon="el-icon-s-promotion" @click="showQqLogin">
                使用 QQ 登录
              </el-button>
            </div>
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      pay:{
        amount:this.amount
      },

      activeTab: "account", // 默认显示账号密码登录
      accountForm: {
        userName:"",
        userPass:"123456",
      },
      phoneForm: {
        phone: "",
        code: "",
      },
      sendingCode: false, // 是否在发送验证码
      countdown: 60, // 验证码倒计时
      timer: null, // 定时器
      accountRules: {
        userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
        userPass: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      phoneRules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  methods: {

    submitAccountForm() {
      this.$refs.accountForm.validate((valid) => {
        if (valid) {
          // 在这里调用后端接口
          this.$http.post("/user/userInfo/userLoginByPassWord",this.accountForm)
          .then(response=> {
            if (response.data.code==200) {
              this.$message.success("登录成功！");
              // 保存用户信息或跳转页面
              localStorage.setItem("token", response.headers.token);
              this.$router.push("/homepage"); // 示例：跳转到主页面
            } else {
              this.$message.error(response.data.message || "登录失败！");
            }
          })
          .catch((error) => {
            console.error(error);
            this.$message.error("登录请求失败，请稍后重试！");
          });
        } else {
          this.$message.error("请填写完整表单！");
        }
      });
    },
    submitPhoneForm() {
      this.$refs.phoneForm.validate((valid) => {
        if (valid) {
          this.$message.success("手机号登录成功！");
          this.$router.push("/homepage"); // 示例：跳转到主页面
          // 调用后端接口逻辑
        } else {
          this.$message.error("请填写完整表单！");
        }
      });
    },
    sendCode() {
      if (this.sendingCode) return;
      if (!/^1[3-9]\d{9}$/.test(this.phoneForm.phone)) {
        this.$message.error("请输入正确的手机号！");
        return;
      }
      this.sendingCode = true;
      this.countdown = 60;
      this.$message.success("验证码已发送！");
      this.timer = setInterval(() => {
        this.countdown -= 1;
        if (this.countdown === 0) {
          clearInterval(this.timer);
          this.sendingCode = false;
        }
      }, 1000);
    },
    showQqLogin() {
            let wtop = (window.screen.height - 320) / 2;
            let wleft = (window.screen.width - 450) / 2;
            let qqWindow=window.open("https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101780702&redirect_uri=http://www.pawntest.com/qqlogin&state=test","TencentLogin",
               "top="+wtop+",left="+wleft+"?,width=450,height=320,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");
            window.addEventListener("message",e => {
                let obj = JSON.parse(e.data);
                if(obj.state == "0") {
                    localStorage.setItem("access-token",obj.token);
                    setTimeout(() => {
                        qqWindow.close();
                        this.$router.push("/homepage"); // 示例：跳转到主页面
                    }, 2000);
                } else if(obj.username==null) {
                    qqWindow.close();
                    alert("没有注册")
                }
            })
  }
  },
  destroyed() {
    if (this.timer) clearInterval(this.timer);
  },
};
</script>

<style scoped>
/* 页面布局 */
.login-page {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-family: "Arial", sans-serif;
}

/* 背景层 */
.background {
position: absolute;
width: 100%;
height: 100%;
/* background: url('movie-background.jpg') no-repeat center center / cover; */
filter: blur(10px) brightness(0.8);
z-index: -1;
}

/* 登录框样式 */
.login-box {
width: 350px;
height: 400px;
padding: 20px;
border-radius: 30px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
text-align: center;
transition: all 0.3s ease;
}

/* Tab 样式 */
.login-tabs {
margin-top: 30px;
}

/* 提交按钮 */
.submit-button {
width: 100%;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
border: none;
font-weight: bold;
border-radius: 10px;
transition: all 0.3s ease;
}

.submit-button:hover {
background: linear-gradient(135deg, #2575fc, #6a11cb);
}

/* 验证码按钮 */
.send-code-button {
color: #409eff;
font-size: 12px;
padding: 0;
}

/* QQ 登录按钮 */
.qq-login-button {
width: 100%;
background: #3b5998;
color: #fff;
border-radius: 10px;
transition: all 0.3s ease;
}

.qq-login-button:hover {
background: #2d4373;
}
</style>
